<div id="products" class="page-layout carded fullwidth inner-scroll">

    <!-- TOP BACKGROUND -->
    <div class="top-bg accent"></div>
    <!-- / TOP BACKGROUND -->

    <!-- CENTER -->
    <div class="center">

        <!-- HEADER -->
        <div class="header accent"
             fxLayout="column" fxLayoutAlign="center center"
             fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="space-between center">

            <!-- APP TITLE -->
            <div class="logo mb-24 mb-md-0"
                 fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                    shopping_basket
                </mat-icon>
                <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
                    商品管理
                </span>
            </div>
            <!-- / APP TITLE -->

            <!-- SEARCH -->
            <div class="search-wrapper mx-32 mx-md-0">
                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
                    <mat-icon>search</mat-icon>
                    <input #filter placeholder="Search for a product">
                </div>
            </div>
            <!-- / SEARCH -->

            <!-- ADD BUTTON -->
            <button mat-raised-button
                    [routerLink]="'/apps/e-commerce/products/new'"
                    class="add-product-button base-white mt-24 mt-md-0">
                <span>新增商品</span>
            </button>
            <!-- / ADD BUTTON -->

        </div>
        <!-- / HEADER -->

        <!-- CONTENT CARD -->
        <div class="content-card">

            <mat-table class="products-table"
                       #table [dataSource]="dataSource"
                       matSort
                       [@animateStagger]="{value:'50'}"
                       basePerfectScrollbar>

                <!-- ID Column -->
                <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.id}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Image Column -->
                <ng-container matColumnDef="image">
                    <mat-header-cell *matHeaderCellDef></mat-header-cell>
                    <mat-cell *matCellDef="let product">
                        <img class="product-image"
                             *ngIf="product.featuredImageId" [alt]="product.name"
                             [src]="product.images[product.featuredImageId].url"/>
                        <img *ngIf="!product.featuredImageId"
                             [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                    </mat-cell>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="name">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>商品名称</mat-header-cell>
                    <mat-cell *matCellDef="let product">
                        <p class="text-truncate">{{product.name}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Category Column -->
                <ng-container matColumnDef="category">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>分类</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
                        <p class="category text-truncate">
                            {{product.categories[0]}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- Price Column -->
                <ng-container matColumnDef="price">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>定价</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                        <p class="price text-truncate">
                            {{product.priceTaxIncl | currency:'CNY':'symbol'}}
                        </p>
                    </mat-cell>
                </ng-container>

                <!-- Quantity Column -->
                <ng-container matColumnDef="quantity">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>库存</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-sm>

                        <span class="quantity-indicator text-truncate"
                              [ngClass]="{'red-500':product.quantity <= 5, 'amber-500':product.quantity > 5 && product.quantity <= 25,'green-600':product.quantity > 25}">
                        </span>
                        <span>
                            {{product.quantity}}
                        </span>

                    </mat-cell>
                </ng-container>

                <!-- Active Column -->
                <ng-container matColumnDef="active">
                    <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>状态</mat-header-cell>
                    <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
                        <mat-icon *ngIf="product.active" class="active-icon green-600 s-16">check</mat-icon>
                        <mat-icon *ngIf="!product.active" class="active-icon red-500 s-16">close</mat-icon>
                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>

                <mat-row *matRowDef="let product; columns: displayedColumns;"
                         class="product"
                         matRipple
                         [routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">
                </mat-row>

            </mat-table>

            <mat-paginator #paginator
                           [length]="dataSource.filteredData.length"
                           [pageIndex]="0"
                           [pageSize]="10"
                           [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>

        </div>
        <!-- / CONTENT CARD -->
    </div>
    <!-- / CENTER -->
</div>
